﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FooTable - jQuery plugin for responsive HTML tables</title>
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
	<link href="css/bootstrap-glyphicons.css" rel="stylesheet" type="text/css"/>
	<link href="../css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css"/>
    <link href="css/footable-demos.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script>
        if (!window.jQuery) { document.write('<script src="js/jquery-1.9.1.min.js"><\/script>'); }
    </script>
    <script src="../js/footable.js?v=2-0-1" type="text/javascript"></script>
    <script src="../js/footable.sort.js?v=2-0-1" type="text/javascript"></script>
    <script src="../js/footable.filter.js?v=2-0-1" type="text/javascript"></script>
    <script src="../js/footable.paginate.js?v=2-0-1" type="text/javascript"></script>
	<script src="js/bootstrap-tab.js" type="text/javascript"></script>
    <script src="js/demos.js" type="text/javascript"></script>
    <style type="text/css">
        .row-delete {
            display: inline-block;
            width: 10px;
        }
    </style>
</head>
<body>
	<div class="demo-container">
        <ul class="breadcrumb">
            <li><a href="http://fooplugins.com/plugins/footable-jquery/-jquery/">FooTable</a> <span class="divider">&raquo;</span></li>
            <li><a href="index.htm">Demos</a> <span class="divider">&raquo;</span></li>
            <li class="active">Add / Remove Rows</li>
        </ul>
        <div class="alert">
            A demo showing how you can add or remove table rows.
        </div>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#demo">Demo</a></li>
			<li><a href="#docs">Docs</a></li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane active" id="demo">
                <a href="#add" class="btn btn-info add-row">Add New Row</a>
                Search: <input id="filter" type="text"/>
				<table class="table demo table-bordered" data-filter="#filter" data-page-size="5">
					<thead>
						<tr>
							<th data-toggle="true">
								First Name
							</th>
							<th data-hide="phone">
								Last Name
							</th>
							<th data-hide="tablet,phone">
								Job Title
							</th>
							<th data-hide="tablet,phone">
								DOB
							</th>
							<th data-hide="tablet,phone">
								Status
							</th>
							<th data-sort-ignore="true" data-hide="tablet,phone" data-name="Delete"></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Isidra</td>
							<td><a href="#">Boudreaux</a></td>
							<td>Traffic Court Referee</td>
							<td data-value="78025368997">22 Jun 1972</td>
							<td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
							<td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
						</tr>
						<tr>
							<td>Shona</td>
							<td>Woldt</td>
							<td><a href="#">Airline Transport Pilot</a></td>
							<td data-value="370961043292">3 Oct 1981</td>
							<td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
							<td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
						</tr>
						<tr>
							<td>Granville</td>
							<td>Leonardo</td>
							<td>Business Services Sales Representative</td>
							<td data-value="-22133780420">19 Apr 1969</td>
							<td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
							<td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
						</tr>
						<tr>
							<td>Easer</td>
							<td>Dragoo</td>
							<td>Drywall Stripper</td>
							<td data-value="250833505574">13 Dec 1977</td>
							<td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
							<td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
						</tr>
						<tr>
							<td>Maple</td>
							<td>Halladay</td>
							<td>Aviation Tactical Readiness Officer</td>
							<td data-value="694116650726">30 Dec 1991</td>
							<td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
							<td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
						</tr>
						<tr>
							<td>Maxine</td>
							<td><a href="#">Woldt</a></td>
							<td><a href="#">Business Services Sales Representative</a></td>
							<td data-value="561440464855">17 Oct 1987</td>
							<td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
							<td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
						</tr>
						<tr>
							<td>Lorraine</td>
							<td>Mcgaughy</td>
							<td>Hemodialysis Technician</td>
							<td data-value="437400551390">11 Nov 1983</td>
							<td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
							<td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
						</tr>
						<tr>
							<td>Lizzee</td>
							<td><a href="#">Goodlow</a></td>
							<td>Technical Services Librarian</td>
							<td data-value="-257733999319">1 Nov 1961</td>
							<td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
							<td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
						</tr>
						<tr>
							<td>Judi</td>
							<td>Badgett</td>
							<td>Electrical Lineworker</td>
							<td data-value="362134712000">23 Jun 1981</td>
							<td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
							<td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
						</tr>
						<tr>
							<td>Lauri</td>
							<td>Hyland</td>
							<td>Blackjack Supervisor</td>
							<td data-value="500874333932">15 Nov 1985</td>
							<td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
							<td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
						</tr>
					</tbody>
                    <tfoot class="hide-if-no-paging">
                    <tr>
                        <td colspan="6">
                            <div class="pagination pagination-centered"></div>
                        </td>
                    </tr>
                    </tfoot>
				</table>
			</div>
			<div class="tab-pane" id="docs">
                <h3>Removing A Row</h3>
                <p>It is recommended to use the built-in <code>removeRow</code> function when deleting rows from a FooTable. The reasons are:</p>
                <ul>
                    <li>A detail row, that may or may not be generated when a breakpoint is fired, is also deleted</li>
                    <li>The correct FooTable events are fired which triggers a redraw. This also forces the sorting, filtering and pagination add-ons to play nicely.</li>
                </ul>
                <p>Simply pass the row object into the <code>removeRow</code> function. (The row object can be a jQuery object or not)</p>
                <pre>
$(&#39;table&#39;).footable().on(&#39;click&#39;, &#39;.row-delete&#39;, function(e) {
    e.preventDefault();
    //get the footable object
    var footable = $(&#39;table&#39;).data(&#39;footable&#39;);

    //get the row we are wanting to delete
    var row = $(this).parents(&#39;tr:first&#39;);

    //delete the row
    footable.removeRow(row);
});</pre>
                <h3>Adding A Row</h3>
                <p>For similar reasons as above, it is recommended to use the built-in <code>appendRow</code> function for adding rows to the FooTable:</p>
                <pre>
$(&#39;.add-row&#39;).click(function(e) {
    e.preventDefault();

    //get the footable object
    var footable = $(&#39;table&#39;).data(&#39;footable&#39;);

    //build up the row we are wanting to add
    var newRow = &#39;&lt;tr&gt;&lt;td&gt;Isidra&lt;/td&gt;&lt;td&gt;&lt;a href=&quot;#&quot;&gt;Boudreaux&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Traffic Court Referee&lt;/td&gt;&lt;td data-value=&quot;78025368997&quot;&gt;22 Jun 1972&lt;/td&gt;&lt;td data-value=&quot;1&quot;&gt;&lt;span class=&quot;status-metro status-active&quot; title=&quot;Active&quot;&gt;Active&lt;/span&gt;&lt;/td&gt;&lt;td&gt;&lt;a class=&quot;row-delete&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-remove&quot;&gt;&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&#39;;

    //add it
    footable.appendRow(newRow);
});</pre>
			</div>
		</div>
	</div>
    <script type="text/javascript">
        $(function () {
			$('table').footable().on('click', '.row-delete', function(e) {
				e.preventDefault();
				//get the footable object
                var footable = $('table').data('footable');

                //get the row we are wanting to delete
                var row = $(this).parents('tr:first');

                //delete the row
                footable.removeRow(row);
			});

            $('.add-row').click(function(e) {
                e.preventDefault();

                //get the footable object
                var footable = $('table').data('footable');

                //build up the row we are wanting to add
                var newRow = '<tr><td>Isidra</td><td><a href="#">Boudreaux</a></td><td>Traffic Court Referee</td><td data-value="78025368997">22 Jun 1972</td><td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td><td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td></tr>';

                //add it
                footable.appendRow(newRow);
            });
        });
    </script>
</body>
</html>
